<template>
    <widget-root :styles="styles">
        <div
            class="navigation"
            :style="{
                'background-color': styles.bg_color,
                'border-radius': `${styles.border_radius_top}px ${styles.border_radius_top}px ${styles.border_radius_bottom}px ${styles.border_radius_bottom}px`
            }"
        >
            <div class="navigation-content flex flex-wrap p-t-16">
                <div
                    v-for="(item, index) in navList"
                    :key="index"
                    class="flex-col col-center m-b-16 navigation-item"
                    :style="{ backgroundColor: `#c6c6c6` }"
                >
                    <div class="xs" :style="{ color: styles.color }">
                        {{ item.name }}
                    </div>
                </div>
            </div>
        </div>
    </widget-root>
</template>

<script lang="ts">
import { Component, Prop, Vue, Watch } from 'vue-property-decorator'
import Indicator from '@/components/decorate/indicator.vue'
import WidgetRoot from '@/components/decorate/widget-root.vue'
@Component({
    components: {
        Indicator,
        WidgetRoot
    }
})
export default class Contents extends Vue {
    @Prop() content!: any
    @Prop() styles!: object | any
    get navList() {
        const {
            content: { data },
            styles: { nav_line, nav_line_num }
        } = this
        if (!Array.isArray(data)) {
            return []
        }

        return data
    }
}
</script>

<style lang="scss" scoped>
.navigation-content {
    .navigation-item {
        border-radius: 20px;
        padding: 5px 10px;
        margin-right: 6px;
        line-height: 15px;
    }
}
</style>
